<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>美辰优品</title>
    <link rel="stylesheet" type="text/css" href="../static/css/wxpay.css">
</head>

<body>

<div style="height: 100%;width: 100%">
    <div class="bgStyle">
        <div class="weui-cells demo_badge_cells">
            <div class="weui-cell weui-cell_active">
                <div class="weui-cell__hd">
                    <img src="../static/images/touxiang.png" id="avatar" alt="">
                </div>
                <div class="weui-cell__bd">
                    <span id="nickName" style="font-size: 35px">联系人</span>
                    <div class="demo_badge_desc">帮我付一下这件商品吧，谢谢啦</div>
                </div>
            </div>
        </div>

        <div class="boxDiv">
            <div class="weui-actionsheet__menu">
                <div id="current1" class="weui-actionsheet__cell">代付金额</div>
                <div role="button" class="weui-actionsheet__cell weui-actionsheet__cell_tips" style="font-size: 60px"
                     id="totalMoney">
                    ￥19.9
                </div>
                <div role="button" class="weui-actionsheet__cell">
                    <input type="hidden" id="order" th:value="${order}">
                    <input type="hidden" id="orderNo">
                    <button onclick="doPay()" class="dopay"> 立即支付</button>
                    <div class="weui-actionsheet__cell__remark">如果订单申请退款，已支付金额将原路退还给您</div>
                </div>
                <div class="weui-actionsheet__cell weui-actionsheet__cell_warn">
                    <div class="weui-cells demo_badge_cells">
                        <div r class="weui-cell weui-cell_active">
                            <div class="weui-cell__hd">
                                <img src="../static/images/productImage.png" id="storeImage" alt="">
                            </div>
                            <div class="weui-cell_product_bd">
                                <span id="storeName">24粒正宗四川蒲江红心猕猴桃新鲜包邮当奇异果水果礼盒</span>
                                <div class="demo_badge_product_desc" id="suk">正宗浦江红心猕猴桃 <span
                                        style="margin-left: 40px;" id="num">x1</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--    弹出框-->
    <div id="textToast" style=" opacity: 1; display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast weui-toast_text">
            <p class="weui-toast__content" id="errorMsg">文字提示</p>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.17/weui.min.js"></script>
<script src="../static/js/wxpay.js"></script>
<script>

    var appid, timeStamp, nonceStr, packageValue, signType, paySign;

    /**
     * 立即支付
     */
    function doPay() {
        var origin = window.location.origin;
        $.ajax({
            // url: 'http://192.168.1.4:8290/wxpay/createOrder',
            url: origin + '/wxpay/createOrder',
            type: 'POST',
            data: {'orderNo': $('#orderNo').val()}, //需要发送的数据
            dataType: "json",//对请求返回的数据预处理
            success: function (obj) {
                console.log(JSON.stringify(obj));
                if (obj.code == 10000) {
                    appid = obj.content.appid, //公众号名称，由商户传入
                        timeStamp = obj.content.timeStamp, //时间戳，自 1970 年以来的秒数
                        nonceStr = obj.content.nonceStr, //随机串
                        packageValue = obj.content.packages, //<span style="font-family:微软雅黑;>商品包信息</span>
                        signType = obj.content.signType, //微信签名方式:
                        paySign = obj.content.paySign//微信签名
                    try {
                        onBridgeReady();
                    } catch (e) {
                    }
                } else {
                    alert(obj.msg);
                    // document.getElementById("errorMsg").innerHTML = obj.msg;
                    // var $textToast = $('#textToast');
                    // if ($textToast.css('display') != 'none') return;
                    // $textToast.fadeIn(100);
                    // setTimeout(function () {
                    //     $textToast.fadeOut(100);
                    // }, 2000);
                }
            }
        });
    };

    function onBridgeReady() {
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": appid,     //公众号ID，由商户传入
                "timeStamp": timeStamp,     //时间戳，自1970年以来的秒数
                "nonceStr": nonceStr,      //随机串
                "package": packageValue,
                "signType": signType,     //微信签名方式：
                // "signType": "RSA",     //微信签名方式：
                "paySign": paySign //微信签名
            },
            function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    console.log("支付成功")
                }
            });
    }

    // if (typeof WeixinJSBridge == "undefined") {
    //     if (document.addEventListener) {
    //         document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    //     } else if (document.attachEvent) {
    //         document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    //         document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    //     }
    // } else {
    //     onBridgeReady();
    // }


</script>
</body>
</html>